@import '../styles/index.less';

.button-size(@padding-y, @padding-x,@font-size,@border-radius) {
  padding: @padding-y @padding-x;
  font-size: @font-size;
  border-radius: @border-radius;
}
.button-color(@background,@border-color,@color,@hover-background: lighten(@background, 7.5%),
@hover-border-color: lighten(@border-color, 10%),
@hover-color: @color
) {
  color: @color;
  background: @background;
  border-color: @border-color;
  &:hover {
    color: @hover-color;
    background: @hover-background;
    border-color: @hover-border-color;
  }
  &:focus,
  &.focus {
    color: @hover-color;
    background: @hover-background;
    border-color: @hover-border-color;
  }
  &[disabled],
  &.disabled {
    color: @color;
    background: @background;
    border-color: @border-color;
  }
}
.btn {
  display: inline-block;
  .button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @border-radius);
  white-space: nowrap;
  text-align: center;
  margin: 0 @spacer / 2;
  font-weight: @btn-font-weight;
  line-height: @btn-line-height;
  color: @body-color;
  background-color: @body-bg;
  border: @btn-border-width solid transparent;
  outline: none;
  box-shadow: @btn-box-shadow;
  cursor: pointer;
  transition: @btn-transition;
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: @btn-disabled-opacity;
    > * {
      pointer-events: none;
    }
  }
}

.btn-lg {
  .button-size(
    @btn-padding-y-lg,
    @btn-padding-x-lg,
    @btn-font-size-lg,
    @border-radius-lg
  );
}

.btn-sm {
  .button-size(
    @btn-padding-y-sm,
    @btn-padding-x-sm,
    @btn-font-size-sm,
    @border-radius-sm
  );
}

.btn-primary {
  .button-color(@primary, @primary, @white);
}

.btn-danger {
  .button-color(@danger, @danger, @white);
}

.btn-default {
  .button-color(@white, @gray-400, @body-color, @white, @primary, @primary);
}

.btn-link {
  font-weight: @font-weight-normal;
  color: @btn-link-color;
  text-decoration: @link-decoration;
  box-shadow: none;
  &:hover {
    color: @btn-link-hover-color;
    text-decoration: @link-hover-decoration;
  }
  &:focus,
  &.focus {
    color: @btn-link-hover-color;
    text-decoration: @link-hover-decoration;
  }
  &[disabled],
  &.disabled {
    color: @btn-link-disabled-color;
    pointer-events: none;
  }
}
